
$(function () {

  // 全局变量 被点击的数据的id
  let itemId;




  // 1.0 发送请求获取数据 渲染页面
  function getCategory() {
    // 1.1 发送ajax请求获取数据
    $.ajax({
      url: "/admin/category/list",
      success(res) {
        // 1.2 使用 模板引擎来渲染  art-template
        const tbodyHTML = template("tbody-tpl", { list: res.data });
        $(".category_table tbody").html(tbodyHTML);
      }
    })
  }


  getCategory();


  // 2.0 绑定了新增分类中  保存按钮的 点击事件
  // 页面中 有两个 class 都是等于 btn_opt
  // 为了确保 dom元素准确
  $("#myModal .btn_opt").on("click", function () {
    // 2.1 获取分类名 
    const name = $("input[name='name']").val().trim();
    // 2.2 获取分类别名
    const slug = $("input[name='slug']").val().trim();

    // 2.3 发送请求 到后台完成添加
    $.ajax({
      url: "/admin/category/add",
      type: "post",
      data: { name, slug },
      success(res) {
        // console.log(res);
        if (res.code === 200) {
          // 成功
          // 关闭模态框 
          $('#myModal').modal('hide');
          // 渲染页面
          getCategory();
        }
      }

    })



  })

  // 3.0 绑定 编辑按钮 点击事件  事件委托 编辑按钮是动态生成
  $(".category_table ").on("click", ".edit", function () {
    // 3.0 显示模态框
    $("#editModal").modal("show");

    // 3.1 页面渲染的时候已经提前把 数据都挂载到 tr标签上了 所以只需要获取到tr标签 自然就能获取到数据
    // parents 找祖先元素
    const item = $(this).parents("tr").data("item");

    // 3.2 将数据 渲染到 编辑模态框中的 input标签内
    $("#editModal #name").val(item.name);
    $("#editModal #slug").val(item.slug);


    // 3.3 获取到被编辑的数据的id
    itemId = item.id;
  });

  // 4 编辑模态框中的 保存按钮 
  $("#editModal .btn_opt").on("click", function () {
    // console.log("编辑-保存");

    const name = $("#editModal #name").val();
    const slug = $("#editModal #slug").val();

    // 发送请求到后台 完成修改
    $.ajax({
      url: "/admin/category/edit",
      type: "post",
      data: { name, slug, id: itemId },
      success(res) {
        // console.log(res);
        if (res.code === 200) {
          // 成功
          // 关闭模态框
          $('#editModal').modal('hide');
          // 渲染页面
          getCategory();
        }
      }
    })

  })

  // 5 删除功能 
  $(".category_table ").on("click", ".delete", function () {
    // 谁调用了代码（函数） this 就是谁呀
    // console.log(this);
    // 使用 变量来接收
    // 箭头函数也可以 （对于箭头函数理解！！）
    layer.confirm('您确定要删除吗?', { icon: 3, title: '提示' }, index => {
      // 箭头函数 不会对里面的this做任何改变 （谁调用了函数this就等于谁   ）
      // 箭头函数中的this 的指向 => 好像没有写过函数一样
      // 没有使用函数的时候 this指向了谁  箭头函数中的this就类似没有使用过函数一样

      const id = $(this).parents("tr").data("item").id;
      $.ajax({
        url: "/admin/category/delete",
        type: "post",
        data: { id },
        success(res) {
          if (res.code === 200) {
            // 删除成功
            getCategory();
            layer.close(index);
          }
        }
      })


    
    });

  })


})